<template>
  <div class="shareInfo">
    <nav-com
      :title="title"
      :showView="showView"
      @back="backHandler()"
    ></nav-com>
    <div class="shareInfo-top">
      <div class="list-goods">
            <div class="box1">分享信息</div>
            <div class="box2">
                <div class="goods-tu">
                <img :src="shareInfo.goods_img" />
                </div>
                <div class="goods-info">
                    <div class="name">
                      <div class="t0">{{shareInfo.goods_title}}</div>
                      <div class="t1">¥{{shareInfo.goods_price}}</div>
                    </div>
                    <div class="num">数量：{{shareInfo.num}}  <span style="float:right;">查看次数:{{shareInfo.view_num}}次查看</span></div>
                    <div class="statis">统计：已领取 {{shareInfo.q_num}} /未领取 {{shareInfo.no_num}}</div>
                </div>
            </div>
            <div class="box3">
              <div class="box3-left">
                链接：{{h5Url}}
              </div>
              <div class="box3-right" @click="copy(h5Url)">
                复制
              </div>
            </div>
      </div>
    </div>
    <div class="shareInfo-box">
      <div class="list-toptab">
        <div class="tab-item" :class="curIndex==index?'active':''" v-for="(item,index) in items" :key="index" @click="tabChange(index)">
          {{item}}
          <div class="tab-line"></div>
       </div>
      </div>
      <div class="boxlist1" v-show="curIndex==0">
          <div class="list" v-for="(item,index) in  no_receive" :key="index">
             <div class="t0">注册时间：{{item.region_time}}</div>
             <div class="t1">
                <div class="t11">领取人</div>
                <div class="t12">{{item.nickname}}</div>
             </div>
             <div class="t1">
                <div class="t11">手机号</div>
                <div class="t12">{{item.mobile}}</div>
             </div>
          </div>
      </div>
      <div class="boxlist2" v-show="curIndex==1">
        <div class="list" v-for="(item,index) in  receive" :key="index">
            <div class="t0">注册时间：{{item.region_time}}</div>
             <div class="t1">
                <div class="t11">领取人</div>
                <div class="t12">{{item.nickname}}</div>
             </div>
             <div class="t1">
                <div class="t11">手机号</div>
                <div class="t12">{{item.mobile}}</div>
             </div>
             <div class="t1">
                <div class="t11">领取时间</div>
                <div class="t12">{{item.receive_time}}</div>
             </div>
             <div class="t1">
                <div class="t11">快递单号</div>
                <div class="t12">797897782732738832</div>
             </div>
             <div class="t2" v-show="show">
                <div class="down-arr" @click="this.show=!this.show">
                  <img src="@/assets/friendShare/arr-bottom.png" />
                </div>
                <div class="post-info">
                   <div class="title">物流信息</div>
                   <div class="post-list">
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/grayradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">收货地址：广东省深圳市生命科技园南区A座12层1308室</div>
                         </div>
                      </div>
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/redradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">您的订单已经到达广东省深圳市航空港</div>
                            <div class="t1">2022-10-22 13:21:45</div>
                         </div>
                      </div>
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/grayradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">您的订单已扫描上车</div>
                            <div class="t1">2022-10-22 13:21:45</div>
                          </div>
                      </div>
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/grayradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">您的订单已出库成功</div>
                            <div class="t1">2022-10-22 13:21:45</div>
                         </div>
                      </div>
                   </div>
                </div>
            </div>
          </div>
      </div>
      <div class="boxlist3" v-show="curIndex==2">
        <div class="list" v-for="(item,index) in  receive" :key="index">
          <div class="t0">注册时间：{{item.region_time}}</div>
             <div class="t1">
                <div class="t11">领取人</div>
                <div class="t12">{{item.nickname}}</div>
             </div>
             <div class="t1">
                <div class="t11">手机号</div>
                <div class="t12">{{item.mobile}}</div>
             </div>
             <div class="t1">
                <div class="t11">领取时间</div>
                <div class="t12">{{item.receive_time}}</div>
             </div>
             <div class="t1">
                <div class="t11">首次登录APP时间</div>
                <div class="t12">{{item.login_time}}</div>
             </div>
             <div class="t1">
                <div class="t11">快递单号</div>
                <div class="t12">797897782732738832</div>
             </div>
             <div class="t2" v-show="show">
                <div class="down-arr" @click="this.show=!this.show">
                  <img src="@/assets/friendShare/arr-bottom.png" />
                </div>
                <div class="post-info">
                   <div class="title">物流信息</div>
                   <div class="post-list">
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/grayradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">收货地址：广东省深圳市生命科技园南区A座12层1308室</div>
                         </div>
                      </div>
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/redradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">您的订单已经到达广东省深圳市航空港</div>
                            <div class="t1">2022-10-22 13:21:45</div>
                         </div>
                      </div>
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/grayradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">您的订单已扫描上车</div>
                            <div class="t1">2022-10-22 13:21:45</div>
                          </div>
                      </div>
                      <div class="post-item">
                         <div class="radio"><img src="@/assets/friendShare/grayradio.png" /></div>
                         <div class="item-detail">
                            <div class="t0">您的订单已出库成功</div>
                            <div class="t1">2022-10-22 13:21:45</div>
                         </div>
                      </div>
                   </div>
                </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import { regin_noReceive} from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from 'vant';
export default {
  name: "bonusList",
  components: {
    navCom,
  },
  data() {
    return {
      showView: true,
      uid: weixin.getUserId(),
      title: "分享信息",
      no_receive: [],
      receive: [],
      login_app:[],
      items:['已注册未领取','已注册已领取','登录APP'],
      curIndex:0,
      shareInfo:{},
      h5Url:'',
      show:false
    };
  },
  mounted(){
    console.log("PARAMS",this.$route.params)
    this.shareInfo=JSON.parse(localStorage.getItem("shareInfo"))
    this.qr_id=this.shareInfo.qr_id
    this.h5Url='https://rongyaofront.bigchun.com/#/freeDetails?uid='+(localStorage.getItem("user_id")||weixin.getUserId())+'&goods_id='+this.shareInfo.goods_id+'&qrcode_id='+this.shareInfo.qr_id
    this.init()
    this.getviewNum()
  },
  methods: {
    //返回
    backHandler() {
      if (weixin.isAndroid()&&window.JS_TROOPS) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    //初始化
    init() {
      regin_noReceive({
        qr_id:this.qr_id||'6',
      }).then((res) => {
        if (res.data.code == 1) {
          this.no_receive=res.data.data.no_receive
          this.receive=res.data.data.receive
          this.login_app=res.data.data.login_app
        }
      });
    },
    copy(content){
      const inputDom = document.createElement('input');
      inputDom.setAttribute('value', content);
      document.body.appendChild(inputDom);
      inputDom.select();
      document.execCommand('copy');
      document.body.removeChild(inputDom);
      Toast("复制成功")
    },
    tabChange(index){
      this.curIndex=index
    }
  },
};
</script>
<style scoped>
.shareInfo{
  background: #F8F8F8;
  height: 100vh;
}
 .shareInfo-top{
   margin: 10px 8px;
   background: #FFFFFF;
   border-radius: 8px;
   padding: 10px;
 }
 .list-goods .box1{
  font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 21px;
padding-bottom: 10px;
 }
 .list-goods .box2{
  border-top: 1px solid #E7E7E7;
  border-bottom: 1px solid #E7E7E7;
  padding: 10px 0;
  display: flex;
}
.list-goods .box3{
  display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}
 .list-goods .box2 .goods-tu {
  width: 64px;
  height: 64px;
  margin-right: 8px;
}
.list-goods .box2 .goods-tu img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}
.list-goods .box2 .goods-info{flex:1}
.list-goods .box2 .goods-info .name {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 18px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
}

.list-goods .box2 .goods-info .name .t0{
  font-weight: 550;
  text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				
	text-overflow: ellipsis;	
	display: -webkit-box;			
	-webkit-line-clamp: 2;			
	line-clamp: 2;					
	-webkit-box-orient: vertical;	
}
.list-goods .box2 .goods-info .num{
  font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
.list-goods .box2 .goods-info .statis{
  font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
.list-goods .box3 .box3-left{
  font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #47474C;
    line-height: 18px;
    width: 80%;
}
.list-goods .box3 .box3-right{
  height: 25px;
    background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
    border-radius: 3px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    width: 44px;
    text-align: center;
    line-height: 25px;
}
 .shareInfo-box{

 }
 .list-toptab {
  display: flex;
  line-height: 44px;
  border-bottom: 1px solid #e7e7e7;
  background: #FFFFFF;
  margin-bottom: 10px;
}
.list-toptab .tab-item {
  flex: 1;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  text-align: center;
}
.list-toptab .tab-item.active {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 550;
  color: #fa2c1e;
}
.list-toptab .tab-item.active .tab-line {
  width: 16px;
  height: 3px;
  background: #fa2c1e;
  border-radius: 2px;
  margin-left: calc(50% - 8px);
}
.boxlist1 .list,.boxlist2 .list,.boxlist3 .list{
  background: #FFFFFF;
box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.05);
border-radius: 8px;
margin: 0 8px 10px;
padding: 10px;
}
.list .t0{
  font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 18px;
padding-bottom: 8px;
border-bottom: 1px solid #E7E7E7;
}
.list .t1{
display: flex;
justify-content: space-between;
align-items: center;
height: 36px;
}
.list .t1 .t11{
  font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
.list .t1 .t12{
  font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
line-height: 18px;
}
.boxlist2 .list .t2 .down-arr{
  margin: 0 auto;
    border-bottom: 1px solid #E7E7E7;
    padding: 10px calc(50% - 7px);
}
.boxlist2 .list .t2 .down-arr img{
  width: 14px;
}
.boxlist2 .list .t2 .post-info{
  padding-top: 12px;
}
.post-info .title{
  font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222222;
    line-height: 20px;
    padding-bottom: 10px;
}
.post-info .post-list .post-item{ 
display: flex;
}
.post-info .post-list .post-item .radio{
  margin-right: 12px;
} 
.post-info .post-list .post-item .radio img{
  width:16px;
}
.item-detail .t1{
  font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
}
</style>